The explosion of unncessasary syntax in JavaScript - The nullish coalescing operator

myVariable = myVariable ?? "foo" vs if(myVariable == undefined) myVariable = "foo"

This is a rant about uncessesary syntax in JavaScript.
From EcmaScript 6 and onward an explosion of new syntax has been added to the language. I think many unnsessasary abstraction have been added - that make the programming code harder to reason about, and might result in more bugs.

Lets start with the nullish coalescing operator: ?? (two question marks)

What is the nullish coalescing operator ?

If the left side is null or undefined, the right side of the ?? will be used. For example:

1 ?? null // 1
null ?? 1 // 1
undefined ?? null // null
1 ?? 2 // 1

The reasoning behind the nullish coalescing operator is that you should not use the or || operator ... And I agree you should not use it, because with || you will get the value that is not "falsy"...

What does "falsy" mean in JavaScript

A falsy value in JavaScript is any value that will be false in an if statement. For Example:

if(1==1) console.log("hi") // hi

if(1) console.log("hi") // hi

if(0) console.log("hi")

if(true) console.log("hi") // hi

if("foo") console.log("hi") // hi

if("") console.log("hi")

if([1,2,3]) console.log("hi") // hi

if([]) console.log("hi") // hi (some people find this confusing, see below)

if(1==2) console.log("hi")

if(false) console.log("hi")

if(null) console.log("hi")

if(undefined) console.log("hi")

Primitive objects

Primitive objects in JavaScript are objects that can not have properties or method attached to them (except for the prototype).
Wheter a primitive object is falsy depends on it's value. They are falsy when they are empty/zero eg. "" (empty string), 0 (number zero), and false.
(note: null and undefined are also primitive as they can not have properties/methods, but they are always "falsy") Arrays (and all other objects) are always "truthy".

Why are "truthy" and "falsy" convenient

You don't have to write something like:

if(foo === undefined || foo === null || foo === "" || foo === 0) throw new Error("foo needs to have a value!");

The logic can look like:

if(!name) alert("Please enter your name");

Why should I not use the || (or) operator

Here's how truthy/falsy can shoot you in the foot:

if(!yearsOfExperience) alert("Please enter how many years of experience");

If the value of the variable yearsOfExperience is 0 the user will get the alert.

howMuchToDonate = userEnteredValue || 100

If the user entered the number 0 the variable howMuchToDonate will become 100
So instead explicitly check for undefined:

if(yearsOfExperience == undefined) alert("Please enter how many years of experience");
if(userEnteredValue == undefined) howMuchToDonate = 100;

null == undefined

If you use two equal signs, null==undefined will be "truthy", because two equal signs does not compare the object type.

So what is the use of the nullish coalescing operator ??

I't's like the || operator but less likely to shoot you in the foot.
I however argue that it's better to be explicit:

if(userEnteredValue == undefined) howMuchToDonate = 100;
instead of
howMuchToDonate = userEnteredValue ?? 100

Which makes the nullish coalescing operator unesseasary!

How popular is the nullish coalescing operator ??

If something new is added to a programming language, the rule is that it becomes part of the modern version of the language - authors get to sell new books, programmers get to use something new and fresh, everybody is excited, except for grumpy old people like me that care more about simplicity and code comprehension rather then syntax sugar.

According to the latest Stage of JavaScript 70% of the people in the survey are now using it! Which triggered me to write this blog post.

Should I make use of "truthy" and "falsy" ?

I guess the truthy/falsy of JavaScript is like the Stockholm syndrome (people who where held hostage in a bank robbery started to sympatise with the bank robbers)
You have to learn about "truthy"/"falsy" though, or you will get unpleasent suprises. But you also should try to avoid it if possible, for example try to be explicit rather then clever.


Written by Januari 22h, 2023.


Follow me via RSS:   RSS https://zäta.com/rss_en.xml (copy to feed-reader)
or Github:   Github https://github.com/Z3TA